<template>
    <div class="app-container">



        <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
            <el-form-item label="借款人" prop="borrowName">
                <el-input class="search-vitem" v-model="queryParams.borrowName" placeholder="借款人" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="交易订单号" prop="orderNo">
                <el-input class="search-vitem" v-model="queryParams.orderNo" placeholder="交易订单号" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['system:transfer:export']">导出</el-button>
            </el-col>
        </el-row> -->

        <el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" label="订单号" width="180" align="center" prop="orderNo" />
            <el-table-column label="主借人" align="center" prop="borrowName" />
            <el-table-column label="收款信息" align="center" prop="cardNo">
				<template #default="scope">
				   {{scope.row.cardName+" "+scope.row.cardNo}}
				</template>
			</el-table-column>
            <el-table-column label="交易金额" width="150" align="center" prop="transferAmount" />
           <el-table-column prop="transferStatus" label="状态">
           	<template #default="scope">
           		 <dict-tag :options="transfer_status" :value="scope.row.transferStatus"/>       
           	</template>
           </el-table-column>
            <el-table-column label="交易时间" align="center" prop="createTime" />
            <el-table-column label="操作" align="center" width="200" fixed="right" class-name="small-padding fixed-width">
                <template #default="scope">
                    <div v-if="scope.row.transferFile!=null">
                        <el-link type="danger" :href="'https://' +scope.row.transferFile"
                            target="_blank">下载转账回单</el-link>
                    </div>
                    <div v-if="scope.row.transferBackFile!=null">
                        <el-link type="danger"  :href="'https://' +scope.row.transferBackFile"
                            target="_blank">下载退款回单</el-link>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            @pagination="getList" />








    </div>
</template>

<script setup name="Company">
import { OrderTransferList } from "@/api/user/order";

const { proxy } = getCurrentInstance();

const { transfer_status} = proxy.useDict('transfer_status');


const transferList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const data = reactive({

    form: {}, // 基本详情
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        borrowName: null,
        orderNo: null,
    },

});

const { queryParams, form } = toRefs(data);

/** 查询公司信息列表 */
function getList() {
    loading.value = true;
    OrderTransferList(queryParams.value).then(response => {
        var data = response.data
        transferList.value = data.list;
        total.value = Number(data.total);
        loading.value = false;
    });
}


/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.userId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('system/company/export', {
        ...queryParams.value
    }, `company_${new Date().getTime()}.xlsx`)
}

getList();
</script>

<style lang="scss" scoped>
.app-container {
    background: #ffffff !important;
}

.four-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .four-item {
        width: calc((100% - 30px) / 4);
        height: 112px;
        background: #FFF5EF;
        border-radius: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .four-img {
            width: 68px;
            height: 68px;
            display: block;
            flex-shrink: 0;
            margin-right: 14px;
        }

        .four-cont {
            line-height: 1;

            .four-tt {
                color: #333333;
                font-size: 12px;

                .big1 {
                    font-weight: 550;
                    color: #FF7C2F;
                    font-size: 28px;
                    padding-right: 2px;
                }

                .big2 {
                    color: #FF7C2F;
                    font-size: 14px;
                    padding-right: 2px;
                }
            }

            .four-dd {
                color: #666666;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 230px !important;
    }
}
</style>
